/*
 * @Description: 城市选择
 * @Author: iamsmiling
 * @Date: 2021-06-08 08:41:03
 * @LastEditTime: 2021-06-09 14:46:09
 */
import 'package:azlistview/azlistview.dart';
import 'package:credit_business_circle/R/R.dart';
import 'package:credit_business_circle/domain/local/city/city_model.dart';
import 'package:credit_business_circle/pages/city/city_select_controller.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

// ignore: must_be_immutable
class CitySelectPage extends StatelessWidget {
  CitySelectPage({Key? key}) : super(key: key);

  double susItemHeight = 64;

  @override
  Widget build(BuildContext context) {
    return GetBuilder<CitySelectController>(
        init: CitySelectController(),
        builder: (_) {
          return ClipRRect(
            borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(R.dimen.sp13),
              bottomRight: Radius.circular(R.dimen.sp13),
            ),
            child: Container(
              height: R.dimen.height * .8,
              child: Scaffold(
                backgroundColor: R.color.ffffffff,
                appBar: AppBar(
                  leading: BackButton(),
                  title: Text("请选择城市"),
                  backgroundColor: R.color.ffffffff,
                  elevation: 0,
                ),
                body: AzListView(
                    data: _.groups,
                    itemCount: _.groups.length,
                    susItemHeight: susItemHeight,
                    indexBarData: "A B C D E F G H J K L M N P Q R S T W X Y Z"
                        .split(" "),
                    indexBarOptions: IndexBarOptions(
                      textStyle: TextStyle(
                          color: R.color.ff36ba93, fontSize: R.dimen.sp11),
                    ),
                    susItemBuilder: (BuildContext context, int i) {
                      CityGrounpEntity g = _.groups[i];
                      return Container(
                        alignment: Alignment.centerLeft,
                        color: R.color.ffffffff,
                        width: R.dimen.width,
                        height: susItemHeight,
                        padding: EdgeInsets.only(left: R.dimen.dp10),
                        margin: EdgeInsets.only(bottom: R.dimen.dp20),
                        child: Text(
                          "${g.tag}",
                          style: TextStyle(
                              fontSize: R.dimen.sp16,
                              color: R.color.ff363636,
                              fontWeight: FontWeight.w600),
                        ),
                      );
                    },
                    itemBuilder: (BuildContext context, int i) {
                      CityGrounpEntity g = _.groups[i];
                      return Container(
                        margin: EdgeInsets.only(left: R.dimen.dp10),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Container(
                              alignment: Alignment.centerLeft,
                              color: R.color.ffffffff,
                              width: R.dimen.width,
                              height: susItemHeight,
                              // padding: EdgeInsets.only(left: R.dimen.dp10),
                              // margin: EdgeInsets.only(
                              //     bottom: R.dimen.dp20, top: R.dimen.dp27),
                              child: Text(
                                "${g.tag}",
                                style: TextStyle(
                                    fontSize: R.dimen.sp16,
                                    color: R.color.ff363636,
                                    fontWeight: FontWeight.w600),
                              ),
                            ),
                            Wrap(
                              spacing: R.dimen.dp12,
                              runSpacing: R.dimen.dp12,
                              children: [
                                for (CityEntity city in g.list)
                                  GestureDetector(
                                    child: Container(
                                      alignment: Alignment.center,
                                      decoration: BoxDecoration(
                                          borderRadius: BorderRadius.circular(
                                              R.dimen.sp3),
                                          color: _.currentCityId == city.id
                                              ? R.color.ff36ba93
                                              : R.color.fff5f5f5),
                                      width: (R.dimen.width -
                                              R.dimen.dp10 -
                                              R.dimen.dp28 -
                                              R.dimen.dp12 * 2) /
                                          3.0001,
                                      padding: EdgeInsets.symmetric(
                                          vertical: R.dimen.dp11),
                                      child: Text(
                                        "${city.name}",
                                        style: TextStyle(
                                            fontSize: R.dimen.sp11,
                                            color: _.currentCityId == city.id
                                                ? R.color.ffffffff
                                                : R.color.ff363636),
                                      ),
                                    ),
                                  )
                              ],
                            ),
                          ],
                        ),
                      );
                    }),
                // body: AzListView(
                //     data: _.cityList,
                //     itemCount: _.cityList.length,
                //     // susItemBuilder: (BuildContext context, int i) {
                //     //   String? tag = _.cityList[i].tagIndex;
                //     //   String? lastTag =
                //     //       i == 0 ? "#" : _.cityList[i - 1].tagIndex;
                //     //   return Visibility(
                //     //       visible: i == 0 ? true : tag != lastTag,
                //     //       child: Text("${_.cityList[i].tagIndex}"));
                //     // },
                //     itemBuilder: (BuildContext context, int index) {
                //       CityModel item = _.cityList[index];
                //       return Text("${item.name}");
                //     }),
              ),
            ),
          );
          // return Container(
          //   child: AzListView(
          //     data: _.cityList,
          //     itemCount: _.cityList.length,
          //     itemBuilder: (BuildContext context, int index) {
          //       if (index == 0) return _buildHeader(context);
          //       CityModel model = _.cityList[index];
          //       String tag = model.getSuspensionTag();
          //       return Container(
          //         height: susItemHeight,
          //         width: MediaQuery.of(context).size.width,
          //         padding: EdgeInsets.only(left: 16.0),
          //         color: Color(0xFFF3F4F5),
          //         alignment: Alignment.centerLeft,
          //         child: Text(
          //           '$tag',
          //           softWrap: false,
          //           style: TextStyle(
          //             fontSize: 14.0,
          //             color: Color(0xFF666666),
          //           ),
          //         ),
          //       );
          //     },
          //     susItemHeight: susItemHeight,
          //     susItemBuilder: (BuildContext context, int index) {
          //       CityModel model = _.cityList[index];
          //       String tag = model.getSuspensionTag();

          //       return Container(
          //         height: susItemHeight,
          //         width: MediaQuery.of(context).size.width,
          //         padding: EdgeInsets.only(left: 16.0),
          //         color: Color(0xFFF3F4F5),
          //         alignment: Alignment.centerLeft,
          //         child: Text(
          //           '$tag',
          //           softWrap: false,
          //           style: TextStyle(
          //             fontSize: 14.0,
          //             color: Color(0xFF666666),
          //           ),
          //         ),
          //       );
          //     },
          //     indexBarData: SuspensionUtil.getTagIndexList(_.cityList),
          //     indexBarOptions: IndexBarOptions(
          //       needRebuild: true,
          //       color: Colors.transparent,
          //       downColor: Color(0xFFEEEEEE),
          //       // localImages: [imgFavorite], //local images.
          //     ),
          //   ),
          // );
        });
  }
}
